<template>
	<view class="">
        <!-- 图文详情分割线 -->
        <u-divider v-if="mobile_intro" class="divider" bg-color="#f3f4f6" height="150">图文详情</u-divider>

        <!-- 图片详情 -->
        <view class="goods-intro-view" v-if="mobile_intro">
            <view v-for="(item,index) in mobile_intro" :key="index" :class="[item.type === 'text' ? 'm-text' : 'm-image']">
                <text v-if="item.type === 'text'">{{item.content}}</text>
                <u-image v-else :src="item.content" mode="widthFix"></u-image>
            </view>
        </view>

        <!-- 规格参数详情分割线 -->
        <u-divider v-if="paramList && paramList.length" class="divider" bg-color="#f3f4f6" height="150">规格参数详情</u-divider>

        <!-- 规格参数详情 -->
        <view class="goods-params-view u-p-b-20" v-if="paramList && paramList.length">
            <u-table v-for="(params, index) in paramList" :key="params.group_id" align="left">
                <u-th>{{ params.group_name }}</u-th>
                <u-tr v-for="param in params.params" :key="param.param_id">
                    <u-td class="params-left">{{ param.param_name }}</u-td>
                    <u-td>{{ param.param_value }}</u-td>
                </u-tr>
            </u-table>
        </view>
	</view>
</template>

<script>
    /**
     * 商品详情页详情组件
     *
     * ===== 使用场景 ======
     * 商品详情页。
     *
     * ===== 参数 =====
     * mobile_intro     图文详情
     * paramList        规格参数详情
     */
	export default {
        props: {
            mobile_intro: {
                type: [Array, String],
                default() {
                    return [[], '']
                }
            },
            paramList: {
                type: Array,
                default() {
                    return []
                }
            }
        }
	}
</script>

<style lang="scss" scoped>
    .goods-params-view, .goods-intro-view {
        background-color: #FFFFFF;
        padding: 20rpx;
        border-radius: 20rpx;
        .m-image {
            font-size: 0;
            margin-bottom: -2rpx;
        }
    }
</style>
